<template>
  <div style="height: 100%">
    <el-container style="height: 100%">
      <el-header>
        <el-input v-model="condition.name" placeholder="搜索用户名或者名称" style="width:200px;margin-right: 15px;"></el-input>
      
  <el-select v-model="condition.status" style="margin-right: 15px;"
        @change="updateChange" placeholder="请选择">
      <el-option
        v-for="item in statusAll"
        :key="item.status"
        :label="item.name"
        :value="item.status">
      </el-option>
    </el-select>
  <el-button icon="el-icon-search"  style="margin-right: 15px;" circle @click="GetUserList"></el-button>
  <el-button  style="margin-right: 15px;" type="primary" plain @click="createVisible?createVisible=false:createVisible=true">添加用户</el-button>

  <el-popconfirm
  title="确定执行批量删除用户操作？执行后无法撤销！"
  @confirm="deleteList"
>
<template #reference>
  <el-button>批量删除</el-button>
  </template>
</el-popconfirm>
      </el-header>
      <el-main style="height: 100%">
        <el-table
          ref="multipleTable"
          :data="tableData.data"
          v-loading="loading"
          @selection-change="selectionKeyChange"
          tooltip-effect="dark"
          style="width: 100%;"
          :height="650"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="key" label="序号" width="100">
          </el-table-column>
          <el-table-column prop="userNumber" label="账号" width="160">
          </el-table-column>
          <el-table-column prop="passWord" label="密码" width="160">
          </el-table-column>
          <el-table-column prop="name" label="名称" width="160" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="powerCode" label="权限" width="160">
          </el-table-column>
          <el-table-column prop="statusCode"  width="160" label="账号状态">
          </el-table-column>
          <el-table-column prop="useStateCode"  width="160" label="是否在线">
          </el-table-column>
          <el-table-column prop="freezetime"  width="160" label="冻结时间">
          </el-table-column>
          <el-table-column prop="name" label="操作" #default="scope">
            <el-button type="primary" plain @click="updateTab(scope.row)">编辑</el-button>
              <el-popconfirm
  title="确定执行批量删除用户操作？执行后无法撤销！"
  @confirm="deleteTab(scope.row.id)"
>
<template #reference>
  <el-button  type="danger" plain v-show="keyList.length==0?true:false">删除</el-button>
  </template>
</el-popconfirm>
           </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSize"
          @current-change="handleCurrent"
          :current-page="condition.pageNo"
          :page-sizes="pageSizes"
          :page-size="condition.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.count"
        >
        </el-pagination>
    <el-dialog
  title="编 辑 账 号"
  :visible="updateVisible"
  :before-close="updateClose"
  width="30%"
  >
  用户名：
  <el-input v-model="updateData.userNumber" placeholder="用户名"></el-input><br/>
  账号名称：
  <el-input v-model="updateData.name" placeholder="名称"></el-input><br/>
  密码：
  <el-input v-model="updateData.passWord" placeholder="密码"></el-input><br/>
    <br/>
  账号权限：
  <el-select v-model="updateData.power" 
        @change="updateChange" placeholder="请选择">
      <el-option
        v-for="item in powers"
        :key="item.power"
        :label="item.name"
        :value="item.power">
      </el-option>
    </el-select>
    <br/>
    <br/>
  账号状态：
  <el-select v-model="updateData.status" 
        @change="updateChange" placeholder="请选择">
      <el-option
        v-for="item in status"
        :key="item.status"
        :label="item.name"
        :value="item.status">
      </el-option>
    </el-select>
    <br/>
    <br/>
    <div v-show="updateData.date" >
    冻结时间：
     <el-date-picker 
      change=""
      v-model="updateData.freezetime"
      type="datetime"
      placeholder="选择冻结日期时间">
    </el-date-picker>

    </div>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="updateVisible = false">取 消</el-button>
      <el-button type="primary" @click="update">确 定</el-button>
    </span>
  </template>
</el-dialog>

<el-dialog
  title="添 加 账 号"
  :visible="createVisible"
  :before-close="createClose"
  width="30%"
  >
  用户名：
  <el-input v-model="createData.userNumber" placeholder="用户名" ></el-input><br/>
  账号名称：
  <el-input v-model="createData.name" placeholder="名称"></el-input><br/>
  密码：
  <el-input v-model="createData.passWord" placeholder="密码"></el-input><br/>
  上传头像：
  <el-upload
  ref="uploader"
  class="avatar-uploader"
  :action='host+"api/File/Uploading"'
  :show-file-list="false"
  :headers="headers"
  :on-change="change"
  :auto-upload="false"
  :on-success="beforeAvatarUpload">
  <img v-if="createData.url" :src="createData.url" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="createVisible = false">取 消</el-button>
      <el-button type="primary" @click="create">确 定</el-button>
    </span>
  </template>
</el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {GetUserList,UpdatesUsers,CreateUser,DeleteUser,DeleteUserList} from "../config/User"
import {get,put,post,del}from "../util/request"
import {host} from '../config/config'
export default {
  data() {
    return {
      host:host,
      updateVisible:false,
      createVisible:false,
      tableData:{data:[],count:0},
      loading:false,
      headers:{},
      keyList:[],
      createData:{
        name:'',
        userNumber:'',
        passWrod:'',
        headPortrait:'',
        headPortraitKey:'',
        url:''
      },
      condition:{
        status:-1,
        name:"",
        pageNo:1,
        pageSize:100,
      },
      status:[
        {status:0,name:'启用'},  
        {status:1,name:'禁用'},  
        {status:2,name:'冻结'},  
      ],
      powers:[
        {power:0,name:'管理员'},  
        {power:1,name:'普通用户'},  
      ],
      statusAll:[
        {status:-1,name:'全部'},  
        {status:0,name:'启用'},  
        {status:1,name:'禁用'},  
        {status:2,name:'冻结'},  
      ],
      updateData:{
        id:'',
        name:'',
        date:false,
        power:1,
        userNumber:'',
        passWrod:'',
        freezetime:null,
        status:0,
      },
      pageSizes:[100, 200, 300, 400,500],
      multipleSelection: [],
    };
  },
  created(){
	var token= sessionStorage.getItem("token")
    this.headers={"Authorization":"Bearer "+token}
    this.GetUserList();
  },
  methods: {
    create(){
      this.$refs.uploader.submit();
    },
    selectionKeyChange(keys){
      var key=[];
      for (let i = 0; i < keys.length; i++) {
        key[i] = keys[i].id;
      }
      this.keyList=key;
    },
      beforeAvatarUpload(response,) {
        console.log("response",response);
        if(response.statusCode===200){
          this.createData.headPortrait=response.value.path
          this.createData.headPortraitKey=response.value.key
          post(CreateUser,this.createData)
            .then(response=>{
              this.createVisible=false;
              this.GetUserList();
              if(response.statusCode===200){
                this.$message.success("创建成功")
              }else{
                this.$message.error(response.message)
              }
            })
        }else{
          this.$message.error(response.message)
        }
      },
      deleteList(){
        if(this.keyList.length==0)return
        del(DeleteUserList,this.keyList)
          .then(response=>{
            if(response.statusCode===200){
              this.GetUserList()
              this.$message.success("删除完成")
            }else{
              this.$message.error(response.message)
            }
          })
      },
    GetUserList(){
      this.loading=true;
      get(GetUserList,this.condition)
        .then(response=>{
        this.loading=false;
          if(response.statusCode==200){
            this.tableData=response.value;
          }else{
            this.$message.error(response.message)
          }
        })
    },
    change(file){
      this.createData.url=URL.createObjectURL(file.raw)
    },
    updateChange(key){
      if(key===2){
        this.updateData.date=true;
      }else{
        this.updateData.date=false;
      }
    },
    update(){
      this.updateVisible = false
      var data=this.updateData
      if(data.userNumber==null){
        this.$message.warning("用户名不能为空")
        return;
      }else{
        if(data.userNumber.length<5){
          this.$message.warning("用户名长度不能小于五位")
          return
        }
      }
      if(data.status===2){
        if(data.freezetime==null){
          this.$message.warning("冻结时间不能为空")
          return
        }
      }
      if(data.passWrod==''||data.passWrod==null){
        this.$message.warning("密码不能为空")
          return
      }else{
        if(data.passWrod.length<5){
          this.$message.warning("密码长度不能小于五位")
          return
        }
      }
      put(UpdatesUsers,data)
        .then(response=>{
          if(response.statusCode===200){
            this.$message.success(response.value)
            this.GetUserList();
          }else{
            this.$message.error(response.message)
          }
        })
    },
    updateClose(){
      this.updateVisible=false
    },
    createClose(){
      this.createVisible=false
    },
    updateTab(data){
      console.log(data);
      this.updateData=data;
      this.updateVisible = this.updateVisible?false:true;

    },
    deleteTab(key){
      var data='?id='+key;
      del(DeleteUser+data)
        .then(response=>{
          if(response.statusCode===200){
            this.$message.success("删除成功")
            this.GetUserList()
          }else{
            this.$message.error(response.message)
          }
        })

    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
     handleSize(val) {
       this.condition.pageSize=val;
      this.GetUserList();
      },
      handleCurrent(val) {
       this.condition.pageNo=val;
      this.GetUserList();
      }
  },
};
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
